<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="__STATIC__/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="__STATIC__/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
    <style>
        .icon_lists .Hui-iconfont {
            font-size: 38px;
            line-height: 100px;
            margin: 10px 0;
            color: #333;
            -webkit-transition: font-size 0.25s ease-out 0s;
            -moz-transition: font-size 0.25s ease-out 0s;
            transition: font-size 0.25s ease-out 0s;
        }
        .icon_lists li {
            float: left;
            width: 100px;
            height: 190px;
            text-align: center;
        }
    </style>
</head>
<body onload="prettyPrint()">
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>
    首页 <span class="c-gray en">&gt;</span>
    页面模板 <span class="c-gray en">&gt;</span>
    表格 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="Hui-article">
    <article class="cl pd-20">
        <h1 class="page_title">表格</h1>
        <h2>系统默认表格</h2>
        <div class="codeView docs-example">
            <table>
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>.table H-ui默认</h2>
        <div class="codeView docs-example">
            <table class="table">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>.table-border 带水平线</h2>
        <div class="codeView docs-example">
            <table class="table table-border">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>.table-bg th带背景</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bg">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border table-bg"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>.table-bordered 带外边框</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bordered">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border table-bordered"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>.radius 圆角</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bordered radius">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border table-bordered radius"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>.table-striped 奇数行背景设为浅灰色</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bordered table-striped">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border table-bordered table-striped"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>.table-hover 鼠标悬停样式</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bordered table-hover">
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                <tr>
                    <th>类别</th>
                    <td>表格内容</td>
                    <td>表格内容</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border table-bordered table-hover"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  ...</span></li><li class="L2"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>定义颜色</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bg table-bordered">
                <thead>
                <tr>
                    <th width="20%">Class</th>
                    <th>描述</th>
                </tr>
                </thead>
                <tbody>
                <tr class="active">
                    <th>.active</th>
                    <td>悬停在行</td>
                </tr>
                <tr class="success">
                    <th>.success</th>
                    <td>成功或积极</td>
                </tr>
                <tr class="warning">
                    <th>.warning</th>
                    <td>警告或出错</td>
                </tr>
                <tr class="danger">
                    <th>.danger</th>
                    <td>危险</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border table-bg table-bordered"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;thead&gt;</span></li><li class="L2"><span class="pln">    </span><span class="tag">&lt;tr&gt;&lt;th</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"20%"</span><span class="tag">&gt;</span><span class="pln">Class</span><span class="tag">&lt;/th&gt;&lt;th&gt;</span><span class="pln">描述</span><span class="tag">&lt;/th&gt;&lt;/tr&gt;</span></li><li class="L3"><span class="pln">  </span><span class="tag">&lt;/thead&gt;</span></li><li class="L4"><span class="pln">  </span><span class="tag">&lt;tbody&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;th&gt;</span><span class="pln">.active</span><span class="tag">&lt;/th&gt;&lt;td&gt;</span><span class="pln">悬停在行</span><span class="tag">&lt;/td&gt;&lt;/tr&gt;</span></li><li class="L6"><span class="pln">    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"success"</span><span class="tag">&gt;&lt;th&gt;</span><span class="pln">.success</span><span class="tag">&lt;/th&gt;&lt;td&gt;</span><span class="pln">成功或积极</span><span class="tag">&lt;/td&gt;&lt;/tr&gt;</span></li><li class="L7"><span class="pln">    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"warning"</span><span class="tag">&gt;&lt;th&gt;</span><span class="pln">.warning</span><span class="tag">&lt;/th&gt;&lt;td&gt;</span><span class="pln">警告或出错</span><span class="tag">&lt;/td&gt;&lt;/tr&gt;</span></li><li class="L8"><span class="pln">    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"danger"</span><span class="tag">&gt;&lt;th&gt;</span><span class="pln">.danger</span><span class="tag">&lt;/th&gt;&lt;td&gt;</span><span class="pln">危险</span><span class="tag">&lt;/td&gt;&lt;/tr&gt;</span></li><li class="L9"><span class="pln">  </span><span class="tag">&lt;/tbody&gt;</span></li><li class="L0"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <h2>对齐方式</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bordered">
                <thead class="text-c">
                <tr>
                    <th>对齐方式</th>
                    <th>类名</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>居左</td>
                    <td>默认</td>
                </tr>
                <tr class="text-c">
                    <td>居中</td>
                    <td>.text-c</td>
                </tr>
                <tr class="text-r">
                    <td>居右</td>
                    <td>.text-r</td>
                </tr>
                </tbody>
            </table>
        </div><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-border table-bordered"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;thead</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-c"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">    </span><span class="tag">&lt;tr&gt;</span></li><li class="L3"><span class="pln">      </span><span class="tag">&lt;th&gt;</span><span class="pln">对齐方式</span><span class="tag">&lt;/th&gt;</span></li><li class="L4"><span class="pln">      </span><span class="tag">&lt;th&gt;</span><span class="pln">类名</span><span class="tag">&lt;/th&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;/tr&gt;</span></li><li class="L6"><span class="pln">  </span><span class="tag">&lt;/thead&gt;</span></li><li class="L7"><span class="pln">  </span><span class="tag">&lt;tbody&gt;</span></li><li class="L8"><span class="pln">    </span><span class="tag">&lt;tr&gt;</span></li><li class="L9"><span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">居左</span><span class="tag">&lt;/td&gt;</span></li><li class="L0"><span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">默认</span><span class="tag">&lt;/td&gt;</span></li><li class="L1"><span class="pln">    </span><span class="tag">&lt;/tr&gt;</span></li><li class="L2"><span class="pln">    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-c"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">居中</span><span class="tag">&lt;/td&gt;</span></li><li class="L4"><span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">.text-c</span><span class="tag">&lt;/td&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;/tr&gt;</span></li><li class="L6"><span class="pln">    </span><span class="tag">&lt;tr</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-r"</span><span class="tag">&gt;</span></li><li class="L7"><span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">居右</span><span class="tag">&lt;/td&gt;</span></li><li class="L8"><span class="pln">      </span><span class="tag">&lt;td&gt;</span><span class="pln">.text-r</span><span class="tag">&lt;/td&gt;</span></li><li class="L9"><span class="pln">    </span><span class="tag">&lt;/tr&gt;</span></li><li class="L0"><span class="pln">  </span><span class="tag">&lt;/tbody&gt;</span></li><li class="L1"><span class="tag">&lt;/table&gt;</span></li></ol></pre>
        <p>友情提示：可以给tr整行加，也可以单独给td 或者th 设置</p>
        <h3>CSS代码</h3><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="com">/*默认table*/</span></li><li class="L1"><span class="pln">table</span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="lit">100</span><span class="pun">%;</span><span class="pln">empty</span><span class="pun">-</span><span class="pln">cells</span><span class="pun">:</span><span class="pln">show</span><span class="pun">;</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">transparent</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">collapse</span><span class="pun">:</span><span class="pln">collapse</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">spacing</span><span class="pun">:</span><span class="lit">0</span><span class="pun">}</span></li><li class="L2"><span class="pln">table th</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="lit">400</span><span class="pun">}</span></li><li class="L3"><span class="com">/*带水平线*/</span></li><li class="L4"><span class="pun">.</span><span class="pln">table th</span><span class="pun">{</span><span class="pln">font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln">bold</span><span class="pun">}</span></li><li class="L5"><span class="pun">.</span><span class="pln">table th</span><span class="pun">,.</span><span class="pln">table td</span><span class="pun">{</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">8px</span><span class="pun">;</span><span class="pln">line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="lit">20px</span><span class="pun">}</span></li><li class="L6"><span class="pun">.</span><span class="pln">table td</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">left</span><span class="pun">}</span></li><li class="L7"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">success </span><span class="pun">&gt;</span><span class="pln"> td</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#dff0d8}</span></li><li class="L8"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">error </span><span class="pun">&gt;</span><span class="pln"> td</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#f2dede}</span></li><li class="L9"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">warning </span><span class="pun">&gt;</span><span class="pln"> td</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fcf8e3}</span></li><li class="L0"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">info </span><span class="pun">&gt;</span><span class="pln"> td</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#d9edf7}</span></li><li class="L1"><span class="pun">.</span><span class="pln">table tbody </span><span class="pun">+</span><span class="pln"> tbody</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="lit">2px</span><span class="pln"> solid </span><span class="com">#ddd}</span></li><li class="L2"><span class="pun">.</span><span class="pln">table </span><span class="pun">.</span><span class="pln">table</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff}</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="com">/*带横向分割线*/</span></li><li class="L5"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">border</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd}</span></li><li class="L6"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">border th</span><span class="pun">,.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">border td</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd}</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="com">/*th带背景*/</span></li><li class="L9"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">bg thead th</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#F5FAFE}</span></li><li class="L0"><span class="com">/*带外边框*/</span></li><li class="L1"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">bordered</span><span class="pun">{</span><span class="pln">border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}</span></li><li class="L2"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">bordered th</span><span class="pun">,.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">bordered td</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd}</span></li><li class="L3"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">border</span><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">bordered</span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="lit">0</span><span class="pun">}</span></li><li class="L4"><span class="pln">&nbsp;</span></li><li class="L5"><span class="com">/*奇数行背景设为浅灰色*/</span></li><li class="L6"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">striped tbody </span><span class="pun">&gt;</span><span class="pln"> tr</span><span class="pun">:</span><span class="pln">nth</span><span class="pun">-</span><span class="pln">child</span><span class="pun">(</span><span class="pln">odd</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> td</span><span class="pun">,.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">striped tbody </span><span class="pun">&gt;</span><span class="pln"> tr</span><span class="pun">:</span><span class="pln">nth</span><span class="pun">-</span><span class="pln">child</span><span class="pun">(</span><span class="pln">odd</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> th</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#f9f9f9}</span></li><li class="L7"><span class="com">/*竖直方向padding缩减一半*/</span></li><li class="L8"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">condensed th</span><span class="pun">,.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">condensed td</span><span class="pun">{</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">4px</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">}</span></li><li class="L9"><span class="com">/*鼠标悬停样式*/</span></li><li class="L0"><span class="pun">.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">hover tbody tr</span><span class="pun">:</span><span class="pln">hover td</span><span class="pun">,.</span><span class="pln">table</span><span class="pun">-</span><span class="pln">hover tbody tr</span><span class="pun">:</span><span class="pln">hover th</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f5f5f5}</span></li><li class="L1"><span class="com">/*定义颜色*/</span></li><li class="L2"><span class="com">/*悬停在行*/</span></li><li class="L3"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">active</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">active</span><span class="pun">&gt;</span><span class="pln">td</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">active</span><span class="pun">&gt;</span><span class="pln">th</span><span class="pun">,.</span><span class="pln">table tbody tr </span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#F5F5F5!important}</span></li><li class="L4"><span class="com">/*成功或积极*/</span></li><li class="L5"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">success</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">success</span><span class="pun">&gt;</span><span class="pln">td</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">success</span><span class="pun">&gt;</span><span class="pln">th</span><span class="pun">,.</span><span class="pln">table tbody tr </span><span class="pun">.</span><span class="pln">success</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#DFF0D8!important}</span></li><li class="L6"><span class="pln">&nbsp;</span></li><li class="L7"><span class="com">/*警告或出错*/</span></li><li class="L8"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">warning</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">warning</span><span class="pun">&gt;</span><span class="pln">td</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">warning</span><span class="pun">&gt;</span><span class="pln">th</span><span class="pun">,.</span><span class="pln">table tbody tr </span><span class="pun">.</span><span class="pln">warning</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#FCF8E3!important}</span></li><li class="L9"><span class="com">/*危险*/</span></li><li class="L0"><span class="pun">.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">danger</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">danger</span><span class="pun">&gt;</span><span class="pln">td</span><span class="pun">,.</span><span class="pln">table tbody tr</span><span class="pun">.</span><span class="pln">danger</span><span class="pun">&gt;</span><span class="pln">th</span><span class="pun">,.</span><span class="pln">table tbody tr </span><span class="pun">.</span><span class="pln">danger</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#F2DEDE!important}</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="com">/*表格文字对齐方式，默认是居左对齐*/</span></li><li class="L3"><span class="pun">.</span><span class="pln">table </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">c th</span><span class="pun">,.</span><span class="pln">table </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">c td</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">center</span><span class="pun">}</span><span class="com">/*整行居中*/</span></li><li class="L4"><span class="pun">.</span><span class="pln">table </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">r th</span><span class="pun">,.</span><span class="pln">table </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">r td</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">right</span><span class="pun">}</span><span class="com">/*整行居右*/</span></li><li class="L5"><span class="pun">.</span><span class="pln">table th</span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">l</span><span class="pun">,.</span><span class="pln">table td</span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">l</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">left</span><span class="pun">!</span><span class="pln">important</span><span class="pun">}</span><span class="com">/*单独列居左*/</span></li><li class="L6"><span class="pun">.</span><span class="pln">table th</span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">c</span><span class="pun">,.</span><span class="pln">table td</span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">c</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">center</span><span class="pun">!</span><span class="pln">important</span><span class="pun">}</span><span class="com">/*单独列居中*/</span></li><li class="L7"><span class="pun">.</span><span class="pln">table th</span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">r</span><span class="pun">,.</span><span class="pln">table td</span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">r</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">right</span><span class="pun">!</span><span class="pln">important</span><span class="pun">}</span><span class="com">/*单独列居右*/</span></li></ol></pre>
        <!--高速版-->
        <div id="SOHUCS" sid=""></div>
        <!-- <script charset="utf-8" type="text/javascript" src="//changyan.sohu.com/upload/changyan.js" ></script>
        <script type="text/javascript">
            window.changyan.api.config({
                appid: 'cystmLO0N',
                conf: 'prod_06226f5d322c22bcd421cb90462fe2a2'
            });
        </script> -->

    </article>

</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/prettify.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>

<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>